<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Каталог</title>
    <link rel="stylesheet" href="./assets/style/main.scss" />
    <link rel="icon" type="image/x-icon" href="/assets/images/favicon.ico" />
    <link rel="shortcut icon" href="/assets/images/favicon.ico" />
</head>

<body>

    <header class="header">

        <div class="header__logo logo">
            <a href="./index.html" class="logo__item"><img src="./assets/images/logo_black.svg" alt=""
                    class="logo__picture"><img src="./assets/images/logo_text_black.svg" alt=""
                    class="logo__picture logo__picture_text"></a>
        </div>
        <div class="header__links link">
            <a href="./catalog.html" class="link__item">Каталог</a>
        </div>
        <div class="header__search search">
            <input type="text" placeholder="Поиск" class="search__input">
            <ul class="search__list list">
                <!-- <li class="list__item"></li> -->
            </ul>
        </div>
        <div class="header__account account">
            <div class="account__personal">
                <div class="account__greeting" id="hiNameUser"></div>
                <img src="./assets/images/avatar.svg" alt="avatar" class="account__avatar">
            </div>
            <div class="account__exit exit">
                <div class="exit__text">Выйти&nbsp;</div>
                <img src="./assets/images/logout.svg" alt="door" class="exit__img">
            </div>
            <div class="account__enter" id="hiUser">
                <button class="account__btn" id="btnOpen">Войти</button>
            </div>
        </div>
        <div class="burger-menu">
            <a href="" class="burger-menu__button">
                <span class="burger-menu__lines"></span>
            </a>
            <nav class="burger-menu__nav">
                <a href="./catalog.html" class="burger-menu__link">Каталог</a>
                <a href="./personalaccount.html" class="burger-menu__link" id="personalAccount">Личный кабинет<img src="./assets/images/avatar_white.svg" alt="avatar" class="tiny-img"></a>
                <a class="burger-menu__link" id="btnOpenBurger">Войти<img src="./assets/images/login_white.svg" alt="door" class="tiny-img"></a>
                <div class="burger-menu__link burger-menu__exit">Выйти
                    <img src="./assets/images/logout_white.svg" alt="door" class="tiny-img">
                </div>
                <a href="./index.html" class="burger-menu__link">На главную<img src="./assets/images/logo_white.svg" alt="logo" class="tiny-img"><img src="./assets/images/logo_text_white.svg" alt="logo" class="tiny-img"></a>
            </nav>
            <div class="burger-menu__overlay"></div>
        </div>
    </header>

    <!-- Модальное окно -->
    <dialog class="dialog" id="windModal">
        <div class="dialog__close">
            <button class="dialog__close-btn" id="btnClose">&#10799;</button>
        </div>
        <div class="dialog__container" id="formContainer">
            <div class="dialog__one-block main-form">
                <h2 class="dialog__title">КиноКосмос</h2>
                <p class="dialog__text dialog-form">Войти в личный кабинет</p>
                <form class="dialog-form__form" name="loginForm" novalidate>
                    <div class="dialog-form__email">
                        <label for="loginEmail" class="dialog-form__email-text">Email</label>
                        <input type="email" name="secondEmail" class="dialog-form__email-input" id="loginEmail"
                            placeholder="Введите email..." required>

                        <p class="dialog-form__email-error error-text" id="dialogEmailError"></p>
                    </div>
                    <div class="dialog-form__password">
                        <label for="loginPassword" class="dialog-form__password-text">Пароль <button
                                class="dialog-form__password-btn" id="passwordBtn">Забыли пароль?</button></label>
                        <input name="newPassword" class="dialog-form__password-input" type="password" id="loginPassword"
                            placeholder="Введите пароль..." minlength="8" required>

                        <p class="dialog-form__password-error error-text" id="dialogPasswError"></p>
                    </div>
                    <div class="dialog-form__btn">
                        <button class="dialog-form__btn-text" id="btnLogin">Войти</button>
                    </div>
                </form>

                <div class="dialog__block">
                    <p class="dialog__block-text">Новенький?</p>
                    <a class="dialog__block-link" href="./registr.html">создай аккаунт</a>
                </div>
            </div>

            <!-- пользователь вводит свой email и кодовое слово -->
            <div class="dialog__two-block check-input" id="examDate">
                <h5 class="dialog__text-title dialog-form">Введите почту и кодовое слово, которые Вы вводили при
                    регистрации
                </h5>
                <form class="dialog-form__form" name="secondForm" novalidate>
                    <div class="dialog-form__email">
                        <label for="secondEmail" class="dialog-form__email-text">Email</label>
                        <input type="email" name="secondEmailInput" class="dialog-form__email-input" id="secondEmail"
                            pattern="^[A-Z0-9\._%\+-]+@[A-Z0-9-]+\.[A-Z]{2,4}$" placeholder="Введите email..." required>

                        <p class="dialog-form__err-email error-text" id="secondEmailErr"></p>
                    </div>
                    <div class="dialog-form__secret">
                        <label for="secondSecret" class="dialog-form__secret-text">Кодовое слово</label>
                        <input type="text" placeholder="Введите кодовое слово..." name="secondSecretInput"
                            class="dialog-form__secret-input" id="secondSecret" minlength="2" required>

                        <p class="dialog-form__err-secret error-text" id="secondSecretErr"></p>
                    </div>
                    <div class="dialog-form__btn">
                        <button class="dialog-form__btn-text" id="secondBtn">Проверить</button>
                    </div>
                </form>
            </div>

            <!-- пользователь вводит новый пароль и повторяет введенный выше пароль. Пароль перезаписывается в БД -->
            <div class="dialog__three-block new-pass" id="replacePass">
                <h5 class="dialog__text-title dialog-form">Введите новый пароль</h5>
                <form class="dialog-form__form" name="thirdForm" novalidate>
                    <div class="dialog-form__password">
                        <label for="thirdPassword" class="dialog-form__password-text">Пароль</label>
                        <input name="thirdCheckOk" type="password" class="dialog-form__password-input"
                            id="thirdPassword" placeholder="Введите новый пароль..." minlength="8" required>

                        <p class="dialog-form__err-password error-text" id="thirdPasswordErr"></p>
                    </div>
                    <div class="dialog-form__reappassword">
                        <label for="thirdReappassword" class="dialog-form__reappassword-text">Повторите пароль</label>
                        <input type="password" name="thirdCheckOk" class="dialog-form__reappassword-input"
                            id="thirdReappassword" placeholder="Повторите пароль..." minlength="8" required>

                        <p class="dialog-form__err-reappassword error-text" id="thirdReappasswordErr"></p>
                    </div>
                    <div class="dialog-form__btn">
                        <button class="dialog-form__btn-text" id="thirdBtn">Изменить пароль</button>
                    </div>
                </form>
            </div>

            <!-- Новый пароль успешно зарегестрирован -->
            <div class="dialog__four-block ok-block">
                <div class="ok-block__location">
                    <p class="ok-block__text">Вы успешно изменилии пароль</p>
                    <button class="ok-block__btn" id="newComwIn">перейти в форму входа</button>
                </div>
            </div>

        </div>
    </dialog>


    <main class="main-catalog container">
        <div class="catalog-container">
            <div class="catalog__interface">
                <div class="catalog__header">Каталог</div>
                <div class="catalog__boxes">
                    <form class="catalog__box">
                        <label for="genre">Жанр</label>
                        <select class="catalog__item" id="genre" name="genre">
                            <option value="">Все жанры</option>
                            <option value="1">триллер</option>
                            <option value="2">драма</option>
                            <option value="3">криминал</option>
                            <option value="4">мелодрама</option>
                            <option value="5">детектив</option>
                            <option value="6">фантастика</option>
                            <option value="7">приключения</option>
                            <option value="8">биография</option>
                            <option value="9">фильм-нуар</option>
                            <option value="10">вестерн</option>
                            <option value="11">боевик</option>
                            <option value="12">фэнтези</option>
                            <option value="13">комедия</option>
                            <option value="14">военный</option>
                            <option value="15">история</option>
                            <option value="16">музыка</option>
                            <option value="17">ужасы</option>
                            <option value="18">мультфильм</option>
                            <option value="19">семейный</option>
                            <option value="20">мюзикл</option>
                            <option value="21">спорт</option>
                            <option value="22">документальный</option>
                            <option value="23">короткометражка</option>
                            <option value="24">аниме</option>
                            <option value="26">новости</option>
                            <option value="27">концерт</option>
                            <option value="29">церемония</option>
                            <option value="30">реальное ТВ</option>
                            <option value="31">игра</option>
                            <option value="32">ток-шоу</option>
                            <option value="33">детский</option>
                        </select>
                    </form>
                    <form class="catalog__box">
                        <label for="country">Страна</label>
                        <select class="catalog__item" id="country" name="country">
                            <option value="">Все страны</option>
                            <option value="34">Россия</option>
                            <option value="1">США</option>
                            <option value="2">Швейцария</option>
                            <option value="3">Франция</option>
                            <option value="4">Польша</option>
                            <option value="5">Великобритания</option>
                            <option value="6">Швеция</option>
                            <option value="7">Индия</option>
                            <option value="8">Испания</option>
                            <option value="9">Германия</option>
                            <option value="10">Италия</option>
                            <option value="11">Гонконг</option>
                            <option value="12">Германия</option>
                            <option value="13">Австралия</option>
                            <option value="14">Канада</option>
                            <option value="15">Мексика</option>
                            <option value="16">Япония</option>
                            <option value="17">Дания</option>
                            <option value="18">Чехия</option>
                            <option value="19">Ирландия</option>
                            <option value="21">Китай</option>
                            <option value="22">Норвегия</option>
                            <option value="33">СССР</option>
                            <option value="44">Турция</option>
                        </select>
                    </form>
                    <form class="catalog__box">
                        <label for="movie-serial">Фильм или сериал?</label>
                        <select class="catalog__item" id="movie-serial" name="movie-serial">
                            <option value="ALL">И сериалы и фильмы</option>
                            <option value="FILM">Фильмы</option>
                            <option value="TV_SHOW">тв-шоу</option>
                            <option value="TV_SERIES">Сериалы</option>
                            <option value="MINI_SERIES">Мини-сериалы</option>
                        </select>
                    </form>
                    <div class="catalog__btn">
                        <button class="btn">Поиск</button>
                    </div>
                </div>


            </div>
            <div class="catalog__image image">
                <img src="./assets/images/film-strip.png" alt="film-strip" class="image__img">
                <img src="./assets/images/astronaut.png" alt="astronaut" class="image__img">
            </div>

            <div class="content">

            </div>
            <!-- Модальное окно для неавторизованного пользователя -->
            <!-- <dialog class="dialog" id="redirectionModal">
                <div class="dialog__close">
                    <button class="dialog__close" id="btnCloseRedirectionModal">
                        &#10799;
                    </button>
                </div>
                <div class="dialog__container" id="redirectionContainer">
                    <h2 class="dialog__title">Вы не вошли на сайт</h2>
                    <p class="dialog__text">
                        Авторизуйтесь, чтобы добавить фильм в избранное.
                    </p>
                    <div class="dialog__btn">
                        <button class="dialog__btn-text" name="redirectToAuthForm" id="btnRedirectToAuth">
                            Авторизоваться
                        </button>
                    </div>
                </div>
            </dialog> -->

        </div>
    </main>

    <script type="module" src="./src/catalog.js"></script>
    <script type="module" src="./src/header.js"></script>
    <script type="module" src="./src/modal.js"></script>
</body>

</html>